<#assign className = table.className>   
<#assign classNameLower = className?uncap_first> 

<template>
    <el-dialog :title="update ? '修改' : '添加'" :visible.sync="visible" class="modify-dialog">
        <el-form
                @submit.native.prevent="()=>{onSubmit()}"
                ref="form"
                :model="form"
                :rules="formRules"
                size="mini"
                label-width="120px"
                v-loading="loading"
        >
            <el-row>
            <#list table.columns as column>
            <#if column.constantName != "ID" && column.constantName != "STATUS" && column.constantName != "CREATE_TIME" && column.constantName != "UPDATE_TIME">
            <#if column.haveRelTable==0>
                <el-col :span="12">
                    <el-form-item label="${column.columnAlias}:" prop="${column.relTableObj.classNameFirstLower}" class="required">
                        <el-input v-model="form.${column.relTableObj.classNameFirstLower}"></el-input>
                    </el-form-item>
                </el-col>
            <#else>
                <el-col :span="12">
                    <el-form-item label="${column.columnAlias}:" prop="${column.columnNameLower}" class="required">
                        <el-input v-model="form.${column.columnNameLower}"></el-input>
                    </el-form-item>
                </el-col>
            </#if>
            </#if>
            </#list>
            </el-row>

            <div class="my-dialog-footer">
                <el-button @click="visible = false">取 消</el-button>
                <el-button type="primary" native-type="submit" :loading="loadingSubmit">确 定</el-button>
            </div>
        </el-form>
    </el-dialog>
</template>

<script type="text/ecmascript-6">
    let initData = {
    <#list table.columns as column>
    <#if column.constantName != "STATUS" && column.constantName != "CREATE_TIME" && column.constantName != "UPDATE_TIME">
    <#if column.haveRelTable==0>
        ${column.relTableObj.classNameFirstLower}: undefined,
    <#else>
        ${column.columnNameLower}: undefined,
    </#if>
    </#if>
    </#list>    
    };

    import Parent from '@/components/element/common/Modify';

    export default {
        name: '${className}Modify',
        extends: Parent,
        data() {
            return {
                packageName: '${namespace}',
                beanName: '${classNameLower}',
                initData: {...initData},

                form: {...initData},
                formRules: {
                <#list table.columns as column>
                <#if column.constantName != "ID" && column.constantName != "STATUS" && column.constantName != "CREATE_TIME" && column.constantName != "UPDATE_TIME">
                <#if column.haveRelTable==0>
                    ${column.relTableObj.classNameFirstLower}: [{
                        required: true, message: '请填写${column.columnAlias}', trigger: 'blur'
                    }],
                    <el-col :span="12">
                        <el-form-item label="${column.columnAlias}:" prop="${column.relTableObj.classNameFirstLower}" class="required">
                            <div>{{form.${column.relTableObj.classNameFirstLower}}}</div>
                        </el-form-item>
                    </el-col>
                <#else>
                    ${column.columnNameLower}: [{
                        required: true, message: '请填写${column.columnAlias}', trigger: 'blur'
                    }],
                </#if>
                </#if>
                </#list>
                },
            }
        },
        methods: {
            // 覆盖父类函数示例
            // open(id) {
            //     this.queryAreaOrigin();
            //     Parent.methods.open.call(this, id);
            // },
        }
    }
</script>